Effects/API/jQuery
animate(params, [duration], [easing], [callback])
自分で独自のアニメーション効果を作成するための関数です。
この関数でポイントになるのは、style属性の変化です。例えば”height”,”top”,”opacity”のようなstyleを、どのような値で完了させたいかを渡してやることで現在の値から変化させていきます。
※ これらの値は、キャメルケースで表記されなければなりません。例えばmargin-leftは、marginLeftのように記述します。
例えば現在のheightが10pxで、animate関数に{height: “100px”}と渡した場合、高さが10pxから100pxに徐々に変化していく効果が得られます。これは数値のみに適用されますが、それ以外にも” hide”,”show”,”toggle”などの文字列が指定された場合にも、対応した効果を作成してくれます。
そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。
第二引数にはアニメーションの動作期間を指定します。”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
第三引数には、値の変化量を調節するeasing名を渡します。ここに独自の関数を指定することで「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」などの変化に富んだ効果を得ることが出来ます。
第四引数には、アニメーション終了時に実行する関数のポインタを渡すことができます。
jQuery1.2からは、”px”だけでなく”em”や”%“にも対応するようになりました。
更に、バージョン1.2からは相対的な値の指定が可能になっています。値の前に”+=“、”-=“を付けることで、現在の値からの増減を表すことができます。
jQuery1.3からは、durationに 0 を指定した場合の処理タイミングが若干変更になりました。
以前はステータスが完了状態になる前に、非同期にアニメーションが終了（dutrationがゼロなので、実際には最終形に変化するだけ）していましたが、1.3からはこのタイミングを完全に合わせています。
この関数でポイントになるのは、style属性の変化です。例えば”height”,”top”,”opacity”のようなstyleを、どのような値で完了させたいかを渡してやることで現在の値から変化させていきます。
※ これらの値は、キャメルケースで表記されなければなりません。例えばmargin-leftは、marginLeftのように記述します。
例えば現在のheightが10pxで、animate関数に{height: “100px”}と渡した場合、高さが10pxから100pxに徐々に変化していく効果が得られます。これは数値のみに適用されますが、それ以外にも” hide”,”show”,”toggle”などの文字列が指定された場合にも、対応した効果を作成してくれます。
そもそも数値型の値をとらない属性（backgroundColorなど）には、animate関数は対応していません。
第二引数にはアニメーションの動作期間を指定します。”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で指定します。例えば”1500”であれば、1.5秒かけてアニメーションが行われます。
第三引数には、値の変化量を調節するeasing名を渡します。ここに独自の関数を指定することで「徐々に速くなる」「最後にゆっくりになる」「上下しつつ進む」などの変化に富んだ効果を得ることが出来ます。
第四引数には、アニメーション終了時に実行する関数のポインタを渡すことができます。
jQuery1.2からは、”px”だけでなく”em”や”%“にも対応するようになりました。
更に、バージョン1.2からは相対的な値の指定が可能になっています。値の前に”+=“、”-=“を付けることで、現在の値からの増減を表すことができます。
jQuery1.3からは、durationに 0 を指定した場合の処理タイミングが若干変更になりました。
以前はステータスが完了状態になる前に、非同期にアニメーションが終了（dutrationがゼロなので、実際には最終形に変化するだけ）していましたが、1.3からはこのタイミングを完全に合わせています。
サンプル
サンプル1
div要素を指定した形に変化させます。
<button id="go">» Run</button> <div id="block">Hello!</div>
div {
background-color:#bca;
width:100px;
border:1px solid green;
}
// Using multiple unit types within one animation.
$("#go").click(function(){
$("#block").animate({
width: "70%",
opacity: 0.4,
marginLeft: "0.6in",
fontSize: "3em",
borderWidth: "10px"
}, 1500 );
});
[全コードを表示]
[実行結果を単体で表示]
サンプル2
jQuery1.2から追加された相対指定を用いて、div要素を左右に移動させます。
<button id="left"><<</button> <button id="right">>></button> <div class="block"></div>
$("#right").click(function(){
$(".block").animate({"left": "+=50px"}, "slow");
});
$("#left").click(function(){
$(".block").animate({"left": "-=50px"}, "slow");
});
[全コードを表示]
[実行結果を単体で表示]
サンプル3
“toggle”指定を用いて、div要素に対して”hide”と”show”を繰り返すようにします。
<button id="animate">animate</button> <div class="block"></div>
$("#animate").click(function(){
$(".block").animate(
{height: "toggle", opacity: "toggle"},
"slow"
);
});
[全コードを表示]
[実行結果を単体で表示]
サンプル4
Easing Pluginを用いて、動作をeaseInQuartで実行します。
<button id="animate">animate</button> <div class="block"></div>
jQuery.extend(jQuery.easing,
{
easeInQuart: function (x, t, b, c, d) {
return c*(t/=d)*t*t*t + b;
},
});
$("#animate").click(function(){
$(".block").animate(
{width: "toggle", opacity: "toggle"},
"slow", "easeInQuart"
);
});
[全コードを表示]
[実行結果を単体で表示]